<template>
    <div>
        <el-dialog :title="title" :visible.sync="setRuleOpen" width="60%" :before-close="closeDelDialog">
            <div>
                <el-row>
                    <el-col :span="24">
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <template v-if="addParams.queryAddParams.type=='0'">
                                <el-tab-pane label="件层" name="0" ></el-tab-pane>
                            </template>
                            <template v-if="addParams.queryAddParams.type=='1'">
                                <el-tab-pane label="件层" name="0" ></el-tab-pane>
                                <el-tab-pane label="卷层" name="1"></el-tab-pane>
                            </template>
                            <template v-if="addParams.queryAddParams.type=='3'">
                                <el-tab-pane label="件层" name="0"></el-tab-pane>
                            <el-tab-pane label="卷层" name="1"></el-tab-pane>
                            <el-tab-pane label="项目层" name="3"></el-tab-pane>
                            </template>
                            
                        </el-tabs>
                    </el-col>
                </el-row>
                <el-row>

                    <el-col :span="24" style="display: flex;justify-content: space-between;">
                        <label style="text-align:right">最终条件</label>
                        <el-input type="textarea" v-model="queryAddParams.fieldCaption" placeholder="请输入显示名称" clearable
                            resize="none" :rows="3" style="width:93%" readonly />
                    </el-col>
                </el-row>



                <el-row :gutter="10" class="mb8" style="margin-top:20px">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="el-icon-plus" @click="ruleHandleAdd">添加</el-button>
                    </el-col>
                </el-row>
                <el-table v-loading="loading" :data="addList" height="480" border @selection-change="addSelectionChange">

                    <el-table-column label="序号" align="center" type="index" />
                    <el-table-column label="条件关系" width="150" align="center" key="RELATION" prop="RELATION">

                    </el-table-column>
                    <el-table-column label="字段" align="center" key="FIELD_NAME" prop="FIELD_NAME"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="关键字" align="center" key="KEYWORD" prop="KEYWORD" :show-overflow-tooltip="true">

                    </el-table-column>
                    <el-table-column label="模糊匹配方式" align="center" key="LIKEPOS" prop="LIKEPOS"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="操作" align="center" key="isCommon" prop="isCommon" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="adddeitTap(scope.row)">修改</el-button>
                            <el-button type="danger" size="mini" @click="adddelTap(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>

                </el-table>

                <pagination v-show="addTotal > 0" :total="addTotal" :page.sync="queryAddParams.pageNum"
                    :limit.sync="queryAddParams.pageSize" @pagination="gettjtableList" />
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDelDialog">取 消</el-button>
<!--                <el-button type="primary" @click="addSubmitTap">保 存</el-button>-->
            </span>
        </el-dialog>

        <el-dialog title="添加" :visible.sync="addOpen" width="40%" :before-close="closeadd">
            <el-form label-width="130px" :model="dataForm" :rules="rules" ref="dataForm">
                <el-form-item label="条件关系" prop="relation">
                    <el-select v-model="dataForm.relation" placeholder="请选择条件关系">
                        <el-option v-for="item in relationList" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="层级" prop="type">
                    <el-select v-model="dataForm.type" placeholder="请选择字段" @change="handleChange" disabled>
                        <el-option v-for="item in typeList" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="字段" prop="fieldName">
                    <el-select v-model="dataForm.fieldName" placeholder="请选择字段">
                        <el-option v-for="item in ziduanSOption" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="模糊匹配方式" prop="likepos">
                    <el-select v-model="dataForm.likepos" placeholder="请选择字段">
                        <el-option v-for="item in likeposList" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" plain icon="el-icon-plus" @click="addTap">添加</el-button>
                </el-col>
            </el-row>
            <el-table :data="addgxList" border width="100%">
                <el-table-column label="序号" align="center" type="index" />
                <el-table-column label="关键字" align="center" key="fieldType" prop="fieldType" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name" placeholder="请输入关键字"></el-input>
                    </template>
                </el-table-column>

                <el-table-column width="100" label="操作" align="center" key="isCommon" prop="isCommon"
                    :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-button type="danger" size="mini" @click="delTap(scope.row.timestamp)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>

            <el-row style="margin-top:20px;text-align:right">
                <el-col :span="24">
                    <el-button type="primary" @click="dataSubmit('dataForm')">确定</el-button>
                    <el-button @click="closeadd">取消</el-button>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>
<script>
import { listforshy, addtj, gettjtable, gettjsql, edittj, deletetj } from "@/api/archive/archivesCategory.js";
import { listforshy2, addtj2, edittj2, gettjtable2, gettjsql2, deletetj2 } from "@/api/manage/archivesCategory";
gettjtable2
export default {
    dicts: ['sys_normal_disable', 'basic_data_fieldtype'],
    // cateIsType  0=应用定义档案门类里面的元数据方案明细列表添加    1=应用定义里面的元数据方案明细列表添加  2=立档单位下面的模板管理的元数据方案添加
    watch: {
        addParams: {
            deep: true,
            immediate: true, // 监听到后，立即执行 handler方法
            handler: function (newVal, oldVal) {
                console.log(newVal, "sdfjksdf")
                this.queryAddParams["id"] = newVal.row.id;
                this.queryAddParams['typedata'] = 0
                this.cateIsType = newVal.cateIsType;
                this.gettjtableList()
                this.gettjsqlPost();
            },

        }
    },
    props: ['setRuleOpen', 'addParams'],
    data() {
        return {
            activeName:"0",
            is: 0,
            title: "设置规则",
            addList: [],
            // 遮罩层
            loading: true,
            cateIsType: "",
            //添加到数据明细基础列表
            queryAddParams: {
                pageNum: 1,
                pageSize: 10,
                groupId: undefined,
                fieldCaption: "",
                fieldName: "",
                type: undefined,
            },
            // 显示搜索条件
            showSearch: true,
            //添加的列表数据  总条数
            addTotal: 0,
            //添加列表的选中数组
            Ids: [],
            addOpen: false,
            ziduanSOption: [],
            dataForm: {
                relation: undefined,
                fieldName: undefined,
                likepos: undefined,
                type: undefined
            },
            rules: {
                relation: [
                    { required: true, message: '请选择条件关系', trigger: 'change' },
                ],
                fieldName: [
                    { required: true, message: '请选择活动字段', trigger: 'change' }
                ],
                likepos: [
                    { required: true, message: '请选择模糊匹配方式', trigger: 'change' }
                ],
                type: [
                    { required: true, message: '请选择模糊层级', trigger: 'change' }
                ]

            },
            relationList: [  //条件列表
                {
                    value: "and",
                    label: "and",
                }, {
                    value: "or",
                    label: "or",
                }
            ],
            likeposList: [
                {
                    value: "左模糊",
                    label: "左模糊",
                }, {
                    value: "右模糊",
                    label: "右模糊",
                }, {
                    value: "模糊",
                    label: "模糊",
                }
            ],
            typeList: [
                { value: "3", label: '项目层' },
                { value: "1", label: '卷层' },
                { value: "0", label: '件层' },
            ],
            addgxList: [],
            index: 0
        }
    },
    created() {
        this.ziduanList();
        this.queryAddParams.typedata = this.activeName
        this.dataForm.type=this.activeName;
    },
    methods: {

        //选择是件、卷、项目
        handleClick(val) {
            this.activeName = val.name;
            this.queryAddParams.typedata = this.activeName
            this.dataForm.type=this.activeName;
            this.gettjtableList()
            this.gettjsqlPost();
        },
        //条件列表
        gettjtableList() {
            console.log(this.queryAddParams, "000000000000000000000000liuhairong")
            if (this.cateIsType == "0" || this.cateIsType == "1") {
                gettjtable(this.queryAddParams).then(res => {
                    if (res.code == "200") {
                        this.addTotal = res.total
                        this.loading = false;
                        this.addList = res.rows;
                    }
                })

            } else {
                gettjtable2(this.queryAddParams).then(res => {
                    if (res.code == "200") {
                        this.addTotal = res.total
                        this.loading = false;
                        this.addList = res.rows;
                    }
                })
            }

        },
        //获取条件sql
        gettjsqlPost() {
            if (this.cateIsType == "0" || this.cateIsType == "1") {

                gettjsql({ zdId: this.addParams.row.id, type: this.activeName }).then(res => {
                    if (res.code == "200") {
                        this.queryAddParams.fieldCaption = res.msg
                    }
                })
            } else {
                gettjsql2({ zdId: this.addParams.row.id, type: this.activeName }).then(res => {
                    if (res.code == "200") {
                        this.queryAddParams.fieldCaption = res.msg
                    }
                })
            }

        },
        // 初始化方法
        init(val) {
            console.log(val)
            //   this.activityId = val   //接收父组件传递的值
            //   this.dialogFormVisible = true;
            //   this.getActivityInfo()
        },


        // 添加多选框选中数据
        addSelectionChange(selection) {
            this.Ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },

        closeDelDialog() {
            this.$emit("closeSetRuleDialog")
        },
        //添加关联关系
        ruleHandleAdd() {
            this.addOpen = true
            this.ziduanList();
        },
        //关闭添加关系
        closeadd() {
            this.addOpen = false
            this.addReset();
        },

        //点击添加  列表push 数据
        addTap() {
            var that = this;
            this.is = 0;
            const timestamp = new Date().getTime();
            this.addgxList.push({
                name: "",
                index: this.index++,
                timestamp: timestamp
            })

        },
        //删除数据
        delTap(val) {
            var that = this;
            for (var i in this.addgxList) {
                if (this.addgxList[i].timestamp == val) {
                    this.addgxList.splice(i, 1)
                }
            }
        },
        dataSubmit() {
            var that = this;
            this.$refs["dataForm"].validate((valid) => {
                if (valid) {
                    if (this.addgxList.length <= 0) {
                        this.$modal.msgWarning('请添加关键字')
                    } else {
                        var dataArr = this.addgxList.map(res => {
                            return res.name
                        })
                        for (var i in dataArr) {
                            if (dataArr[i] == '') {
                                this.$modal.msgWarning('请输入关键字')
                                return
                            }
                        }
                        this.dataForm["keyword"] = dataArr.join('|');
                        this.dataForm["zdId"] = this.addParams.row.id
                        if (this.is == 0) {

                            if (this.cateIsType == "0" || this.cateIsType == "1") {
                                addtj(this.dataForm).then(res => {
                                    if (res.code == "200") {
                                        this.$modal.msgSuccess("添加成功");
                                        that.addReset();
                                        that.gettjtableList();
                                        that.gettjsqlPost();
                                        this.addOpen = false;


                                    }
                                })
                            } else {
                                addtj2(this.dataForm).then(res => {
                                    if (res.code == "200") {
                                        this.$modal.msgSuccess("添加成功");
                                        that.addReset();
                                        that.gettjtableList();
                                        that.gettjsqlPost();
                                        this.addOpen = false;


                                    }
                                })
                            }
                        } else {
                            if (this.cateIsType == "0" || this.cateIsType == "1") {
                                edittj(this.dataForm).then(res => {
                                    if (res.code == "200") {
                                        this.$modal.msgSuccess("修改成功");
                                        that.addReset();
                                        that.gettjtableList();
                                        that.gettjsqlPost();
                                        this.addOpen = false;


                                    }
                                })
                            } else {
                                edittj2(this.dataForm).then(res => {
                                    if (res.code == "200") {
                                        this.$modal.msgSuccess("修改成功");
                                        that.addReset();
                                        that.gettjtableList();
                                        that.gettjsqlPost();
                                        this.addOpen = false;


                                    }
                                })
                            }
                        }
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        // 表单重置
        addReset() {
            this.dataForm = {
                relation: undefined,
                fieldName: undefined,
                likepos: undefined,
                type: this.activeName,
                keyword: undefined
            }
            this.addgxList = [];
            this.ziduanSOption = [];
            this.$refs["dataForm"].resetFields();
        },

        //修改规则列表
        adddeitTap(row) {
            var that = this;
            this.is = 1;
            this.addOpen = true
            if (this.cateIsType == "0" || this.cateIsType == "1") {
                listforshy({
                    groupId: this.addParams.queryAddParams.groupId,
                    type: this.addParams.queryAddParams.type,
                    cateogryId: this.addParams.queryAddParams.categoryId,
                    pageNum: 1,
                    pageSize: 20000
                }).then(response => {
                    var dataArr = response.rows.filter(res => { return res.HAD == 1 })
                    this.ziduanSOption = dataArr.map(option => {
                        return {
                            value: option.FIELD_NAME,
                            label: option.FIELD_CAPTION,
                        }
                    })
                })
            } else {
                listforshy2({
                    groupId: this.addParams.queryAddParams.groupId,
                    type: this.addParams.queryAddParams.type,
                    cateogryId: this.addParams.queryAddParams.categoryId,
                    pageNum: 1,
                    pageSize: 20000
                }).then(response => {
                    var dataArr = response.rows.filter(res => { return res.HAD == 1 })
                    this.ziduanSOption = dataArr.map(option => {
                        return {
                            value: option.FIELD_NAME,
                            label: option.FIELD_CAPTION,
                        }
                    })
                })
            }
            this.dataForm["likepos"] = row.LIKEPOS;
            this.dataForm["fieldName"] = row.FIELD_NAME;
            this.dataForm["relation"] = row.RELATION;
            this.dataForm["type"] = row.TYPE
            this.dataForm["id"] = row.ID

            var array = row.KEYWORD.split("|")
            for (var i in array) {
                this.addgxList.push({
                    name: array[i],
                    index: this.index++,
                    timestamp: new Date().getTime() + i
                })
            }

            console.log(this.addgxList)
        },

        handleChange(row) {
            console.log(this.cateIsType, "sdklfjskldjfkl")
          this.ziduanList();

        },

        //获取字段列表
        ziduanList(){
            if (this.cateIsType == "0" || this.cateIsType == "1") {
                listforshy({
                    groupId: this.addParams.queryAddParams.groupId,
                    type: this.activeName,
                    cateogryId: this.addParams.queryAddParams.categoryId,
                    pageNum: 1,
                    pageSize: 20000
                }).then(response => {
                    var dataArr = response.rows.filter(res => { return res.HAD == 1 })
                    this.ziduanSOption = dataArr.map(option => {
                        return {
                            value: option.FIELD_NAME,
                            label: option.FIELD_CAPTION,
                        }
                    })
                })
            } else {
                listforshy2({
                    groupId: this.addParams.queryAddParams.groupId,
                    type: this.activeName,
                    cateogryId: this.addParams.queryAddParams.categoryId,
                    pageNum: 1,
                    pageSize: 20000
                }).then(response => {
                    var dataArr = response.rows.filter(res => { return res.HAD == 1 })
                    this.ziduanSOption = dataArr.map(option => {
                        return {
                            value: option.FIELD_NAME,
                            label: option.FIELD_CAPTION,
                        }
                    })
                })
            }
        },
        //删除数据
        adddelTap(row) {
            var that = this;
            this.$confirm('是否确认删除当前数据项？',).then(() => {
                if (this.cateIsType == "0" || this.cateIsType == "1") {
                    deletetj(row.ID).then(res => {
                        if (res.code == "200") {
                            that.$modal.msgSuccess("删除成功");

                            that.gettjtableList();
                            that.gettjsqlPost();
                        }

                    })
                } else {
                    deletetj2(row.ID).then(res => {
                        if (res.code == "200") {
                            that.$modal.msgSuccess("删除成功");

                            that.gettjtableList();
                            that.gettjsqlPost();
                        }

                    })
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },

        //设置规则保存
        addSubmitTap() {
            var that = this;

        },
    }
}

</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}
</style>

